<script setup>
const props = defineProps({
  pages: Object
})

function fmtTitle(item) {
  // console.log(item)
  const newItem = [...item]
  newItem.shift()
  // console.log(newItem)
  return newItem.join(' / ')
}
</script>

<template>
  <div class="article-index">
    <template v-for="(group, key) in pages" :key="key">
      <div class="section"></div>

      <div class="chapter">
        <a href="javascrip:;">{{ key }}</a>
      </div>
      <ul class="list">
        <template v-for="item in group" :key="item">
          <li class="item">
            <a class="title" :href="'/doc/web/API/' + item.join('/') + '/#索引'" target="_blank">
              {{ fmtTitle(item) }}
            </a>
          </li>
        </template>
      </ul>
    </template>
  </div>
</template>

<style lang="less" scoped>
ul,
li {
  margin: 0;
  // padding: 0;
  list-style: none;
}
a {
  color: #5c8ec6;
  text-decoration: none;

  &:hover {
    color: #3451b2;
  }
}

.section {
  padding-bottom: 20px;
  border-top: 1px solid #dedede;
}
.chapter {
  font-weight: 700;
  line-height: 45px;

  a {
    color: #333;
    font-weight: bold;
    // text-decoration: underline;
  }
}

.list {
  .item {
    line-height: 30px;
  }
}
</style>
